<template>
  <el-button @click="dialogVisible = true">打开对话框</el-button>
  
  <el-dialog 
    title="提示" 
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="custom-dialog"
  >
    <p>这是一个带自定义动画的对话框</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return { dialogVisible: false }
  }
}
</script>

<style>
/* 自定义对话框动画 */
.custom-dialog {
  animation: dialog-fade-in 0.3s;
}

@keyframes dialog-fade-in {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>








index里面的数据



 <el-button @mouseenter="show = true" @mouseleave="show = false">Click Me</el-button>
 
 
 
      <div style="display: flex; margin-top: 20px; height: 100px">
       
        <transition name="el-zoom-in-top" >
          <div v-show="show"  class="transition-box">.el-zoom-in-top</div>
        </transition>
  
       
      </div>
  


<script>
export default {
  data() {
    return {
    
      
      // 方案二数据
      boxes: [
        { title: '订单',  content: '订单详情...',show: false },
        { title: '用户', content: '用户信息...', show: false },
        { title: '设置', content: '系统设置...', show: false }
      ]
	  
	  
    }
  },
  
}







</script>
